<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>一键报警系统后台</title>
  <style type="text/css">
    *{
      margin:0px;
      padding:0px;
    }
    body, button, input, select, textarea {
      font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
    }
    #container{
      /*min-width:600px;*/
      /*min-height:100px;*/
    }
  </style>

  <!-- bootstrap & fontawesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!--<link rel="stylesheet" href="admin_/css/font-awesome.css">-->
  <!-- jqGrid -->
  <link rel="stylesheet" type="text/css" href="admin_/jqGrid/css/ui.jqgrid-bootstrap.css" />

  <!-- jQuery -->
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="admin_/js/jquery-ui.custom.js"></script>
  <!-- jqGrid -->
  <script src="admin_/jqGrid/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
  <script src="admin_/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>

  <!-- QQ Map -->
  <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
</head>

<body>

<div id="container"></div>

<div id="info">
  <ul id="police_call_list_nav" class="nav nav-tabs">
    <li id="police_call_list_todo" class="active">
      <a href="#" style="outline:none;">未处理</a>
    </li>
    <li id="police_call_list_accepted"><a href="#" style="outline:none;">已受理</a></li>
    <li id="police_call_list_resolved"><a href="#" style="outline:none;">已解决</a></li>
    <button type="button" class="btn btn-default table_refresh" style="margin-top:0.2%;"><span class="glyphicon glyphicon-refresh"></span></button>
    <button id="logout" type="button" class="btn btn-danger btn-sm" style="float:right;margin-right:1%;margin-top:0.4%;">退出登录</button>
  </ul>
</div>

<div>
  <table id="grid-table"></table>
  <div id="grid-pager"></div>

  <div id="panel-move" class="panel panel-info table_refresh" style="width:20%;height:20%;position:absolute;top:5%;right:1%;opacity:0.9;">
    <div class="panel-heading" style="width:100%;height:40px;">新提醒</div>
    <div class="panel-body" style="width:100%;height:77%;overflow: auto;overflow-y :yes"><button id="message_clear" type="button" class="btn btn-default btn-xs" style="position:absolute;bottom:5%;right:8%">清空</button></div>
  </div>

</div>

<script>
  <!-- 消息框可拖动 -->
  $("#panel-move").draggable();
  $("#panel-move").mousedown(function(){
    $(this).css("cursor","pointer");
  }).mouseup(function(){
    $(this).css("cursor","default");
  });
  $(document).ready(function()
  {
    $(".show").mousedown(function(e)//e鼠标事件
    {
      $(this).css("cursor","move");//改变鼠标指针的形状
      var offset = $(this).offset();//DIV在页面的位置
      var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
      var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
      $(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
      {
        $(".show").stop();//加上这个之后
        var _x = ev.pageX - x;//获得X轴方向移动的值
        var _y = ev.pageY - y;//获得Y轴方向移动的值
        $(".show").animate({left:_x+"px",top:_y+"px"},10);
      });
    });
    $(document).mouseup(function()
    {
      $(".show").css("cursor","default");
      $(this).unbind("mousemove");
    })
  })
  <!-- 消息框可拖动 -->
</script>

<script>
  $(function () {
    $("#container").height($(window.parent).height()*0.5); // 地图显示为页面高度的一半
  })

  var map = {}
  var markersArray = [];
  var markersInit = function(police_call_list) {
    if (police_call_list){
    } else {
      police_call_list = {};
    }
    var center = new qq.maps.LatLng(30.624323,120.525684);
    map = new qq.maps.Map(document.getElementById('container'),{
      center: center,
      zoom: 12
    });
    //添加到提示窗
    var info = new qq.maps.InfoWindow({
      map: map
    });
    for (i=0; i<police_call_list.length; i++) {
      (function(m) {
        var position_list = police_call_list[m].position.split(';');
        // 添加连接线
        var path=[
        new qq.maps.LatLng(position_list[0].split(',')[0],position_list[0].split(',')[1]),
        new qq.maps.LatLng(position_list[1].split(',')[0],position_list[1].split(',')[1])
        ];
        var polyline = new qq.maps.Polyline({
          path: path,
          strokeColor: '#333',
          strokeWeight: 2,
          editable:false,
          strokeDashStyle:'dash',
          map: map
        });
        for (j=0; j<position_list.length; j++) {
          (function(n) {
            var position = new qq.maps.LatLng(position_list[n].split(',')[0],position_list[n].split(',')[1]);
            // 创建标记
            var anchor = new qq.maps.Point(6, 6),
            size = new qq.maps.Size(24, 24),
            origin = new qq.maps.Point(0, 0),
            icon = n==0?new qq.maps.MarkerImage('admin_/img/point_1.png', size, origin, anchor):new qq.maps.MarkerImage('admin_/img/point_2.png', size, origin, anchor);
            var marker = new qq.maps.Marker({
              icon: icon,
              title: police_call_list[m].id+'-'+n,
              position: position,
              map: map,
            });
            markersArray.push(marker);
            // 获取标记的点击事件
            qq.maps.event.addListener(marker, 'click', function () {
              $("#"+police_call_list[m].id).click(); // 在表格中点击该标记对应的行
//          $("#grid-table").prepend($("#"+police_call_list[n].id)); // 将对应的行置顶
              $("#"+police_call_list[m].id).fadeOut().fadeIn(); //对应行闪烁
              $("#grid-table").prepend($(".jqgfirstrow")); // jqGrid格式处理
              info.open();
              info.setContent(n==0?'<div style="text-align:left;white-space:nowrap;' + 'margin:6px;">手机号：' + police_call_list[m].mobile + '</br>地址：' + police_call_list[m].address.split(';')[0] + '</br>备注：' + police_call_list[m].remark + '</div>':'<div style="text-align:left;white-space:nowrap;' + 'margin:6px;">手机号：' + police_call_list[m].mobile + '</br>地址：' + police_call_list[m].address.split(';')[1] + '</br>备注：' + police_call_list[m].remark + '</div>');
              info.setPosition(position);
            });
          })(j);
        }
      })(i);
    }
  }

</script>

<script>
  <!-- 退出登录 -->
  // $("#logout").click(function(){
  //   $.ajax({
  //     url:"{:U('Public/logout')}",
  //     type:'POST',
  //     data:'',
  //     dataType:'json',
  //     success:function(data){
  //       if(data.status=='succ'){
  //         location.href = "{:U('Public/login')}";
  //       }
  //     }
  //   });
  // });
  <!-- 退出登录 -->

  <!-- Tab 切换数据 -->
  $("#police_call_list_nav li").click(function () {
    // Tab样式切换
    $("#police_call_list_nav li").removeClass("active");
    $(this).addClass("active");

    // 根据Tab标签获取status
    var statusArr = new Array();
    statusArr = {
      'police_call_list_todo':0,
      'police_call_list_accepted':1,
      'police_call_list_resolved':2
    };
    var status = statusArr[$(this).attr('id')];
    // 重新载入数据
    $("#grid-table").jqGrid('setGridParam', {
      datatype: 'json',
      postData: {'operator':'list','status':status}
    }).trigger('reloadGrid');

    //清除标记
    if (markersArray) {
      for (i in markersArray) {
        markersArray[i].setMap(null);
      }
    }

    return false;
  })
  <!-- Tab 切换数据 -->

  <!-- 刷新table -->
  $(".table_refresh").on('click',function(){
    var status = $("#police_call_list_nav li .active").attr('id');
    $("#grid-table").jqGrid('setGridParam', {
      datatype: 'json',
      postData: {'operator':'list','status':status}
    }).trigger('reloadGrid');
  })
  <!-- 刷新table -->

  <!-- 清空消息 -->
  $("#message_clear").on('click',function(){
    $(".panel-body").html('<button id="message_clear" type="button" class="btn btn-default btn-xs" style="position:absolute;bottom:5%;right:8%">清空</button>');
  })
  <!-- 清空消息 -->

  <!-- 定时查询数据库未处理数据的count变化 -->
  setInterval(function(){
    if (todo_list_map_old==undefined) {
    } else{
      $.ajax({
        url:"admin",
        data:{_token: '{{csrf_token()}}', operator: 'list_compare'},
        type:'post',
        dataType:'json',
        success:function(data){
          if (data.status=="success"){
            var todo_list = {};
            var todo_list_map_new = {};

                // 生成todo_list_map_new,与todo_list_map_old比对
                for (b=0; b<data.list.length; b++) {
                  (function (n) {
                    todo_list['\'' + data.list[n].id + '\''] = data.list[n];
                    todo_list_map_new['\'' + data.list[n].id + '\''] = data.list[n].count;
                  })(b);
                }

                // 比较todo_list_map_old与todo_list_map_new
                // 存在以下两种情况之一，则推送该条key对应的消息
                // 1、new中有old中没有的key
                // 2、new中与old中相同的key对应的value不相等
                for (var key_new in todo_list_map_new) {
                  key_new_flag = 0;
                  for (var key_old in todo_list_map_old) {
                    if (key_new==key_old) { // 在old中找到key
                      key_new_flag = 1; // flag置1
                      if (todo_list_map_new[key_new]==todo_list_map_old[key_old]) { // 两次的count相等
                        // 什么都不做
                      } else{ // 两次的count不等
                        console.log(todo_list[key_new].position);
                        // 推送消息
                        $.ajax({
                          url:"admin",
                          data: {_token: '{{csrf_token()}}', operator:'address_get', id:todo_list[key_new].id, count:todo_list[key_new].count, position:todo_list[key_new].position},
                          type:'post',
                          dataType:'json',
                          success:function(data){
                            console.log(todo_list[key_new].address);
                            if (data.status=='success') {
                              $(".panel-body").prepend("<p>用户 <b class='text-success'>"+ todo_list[key_new].mobile +"</b> 发起第 <b class='text-danger'>"+ todo_list[key_new].count +"</b> 次呼叫，地址："+ data.address.split(';')[data.address.split(';').length-1] +"，备注："+ todo_list[key_new].remark +"</p>")
                            }
                          }
                        })
                      }
                    }
                  }
                  // 检查flag，为0则说明：该报警为新增
                  if (key_new_flag==0) {
                    console.log(todo_list[key_new].position);
                    // 推送消息
                    $.ajax({
                      url:"admin",
                      data: {_token: '{{csrf_token()}}', operator:'address_get', id:todo_list[key_new].id, count:todo_list[key_new].count, position:todo_list[key_new].position},
                      type:'post',
                      dataType:'json',
                      success:function(data){
                        if (data.status=='success') {
                          $(".panel-body").prepend("<p><b class='text-danger'>收到一条新的报警！来自："+ data.address.split(';')[data.address.split(';').length-1] +"</b></p>")
                        }
                      }
                    })
                  }
                  // flag置0
                  key_new_flag = 0;
                }
                todo_list_map_old = todo_list_map_new;
              } else {
                todo_list_map_old = {};
              }
            }
          })
    }
  }
  ,5000);
  <!-- 定时查询数据库未处理数据的count变化 -->

  var grid_selector = "#grid-table";
  var pager_selector = "#grid-pager";
  var todo_list_map_old = {}; // 存储当下在页面上显示的未处理数据
  $(function() {
    $("#grid-table").jqGrid({
      url: "admin",
      datatype: "json", //数据来源，本地数据（local，json,jsonp,xml等）
      shrinkToFit: true,
      autowidth: true, //自动宽
      height: $(window.parent).height()-$("#container").height()-125, //高度，表格高度。可为数值、百分比或'auto'
      mtype: "POST",//提交方式
      postData :{
        _token: '{{csrf_token()}}', 
        operator: 'list',
        status: 0,
//        page: 1
},
styleUI : 'Bootstrap',
colNames: ['#', '手机号', '呼叫次数', '报警地址', '定位地址', '备注', '创建时间', '更新时间', '操作', '坐标','状态'],
colModel: [
{
  name: 'id',
          index: 'id', //索引。其和后台交互的参数为sidx
          width: 100,
          sortable: false,
        },
        {
          name: 'mobile',
          index: 'mobile',
          width: 100,
          sortable: false,
        },
        {
          name: 'count',
          index: 'count',
          width: 200,
          sortable: false,
        },
        {
          name: 'address1',
          index: 'address1',
          width: 200,
          sortable: false,
          formatter: function (cellvalue,options,rowData) {
            if (rowData.address){
              return '<b class="text-danger">'+rowData.address.split(';')[0]+'</b>';
            } else {
              return '未知';
            }
          }
        },
        {
          name: 'address2',
          index: 'address2',
          width: 200,
          sortable: false,
          formatter: function (cellvalue,options,rowData) {
            if (rowData.address){
              return '<b class="text-success">'+rowData.address.split(';')[1]+'</b>';
            } else {
              return '未知';
            }
          }
        },
        {
          name: 'remark',
          index: 'remark',
          width: 200,
          sortable: false,
        },
        {
          name: 'create_time',
          index: 'create_time',
          width: 200,
          sortable: false,
        },
        {
          name: 'update_time',
          index: 'update_time',
          width: 200,
          sortable: false,
        },
        {
          name: 'operator',
          index: 'operator',
          width: 200,
          sortable: false,
          formatter: function (cellvalue,options,rowData) {
            switch (rowData.status) {
              case "0":
              return "<button type=\"button\" class=\"btn btn-primary btn-xs\" onclick=\"callStatusEdit(" + rowData.id + ",1)\">&nbsp;受理&nbsp;</button>";
              break;
              case "1":
              return "<button type=\"button\" class=\"btn btn-primary btn-xs\" onclick=\"callStatusEdit(" + rowData.id + ",2)\">&nbsp;完成&nbsp;</button>";
              break;
              case "2":
              return "已完成";
              break;
              default:
              break;
            }
          }
        },
        {
          name: 'position',
          index: 'position',
          width: 200,
          sortable: false,
          hidedlg: true,
          hidden: true,
        },
        {
          name: 'status',
          index: 'status',
          width: 200,
          sortable: false,
          hidedlg: true,
          hidden: true,
        },
        ],
      viewrecords: true, //是否在浏览导航栏显示记录总数
      rowNum: 10, //每页显示记录数
      rowList: [10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。
      pager: pager_selector, //分页、按钮所在的浏览导航栏
      altRows: true, //设置为交替行表格,默认为false
      // toppager: true,//是否在上面显示浏览导航栏
      // multiselect: true, //是否多选
      // multikey: "ctrlKey",//是否只能用Ctrl按键多选
      // multiboxonly: true, //是否只能点击复选框多选
      // subGrid : true,
      // sortname:'id',//默认的排序列名
      // sortorder:'asc',//默认的排序方式（asc升序，desc降序）
      // caption: "报警列表", //表名
      loadonce:true,
      onSelectRow: function(id){
        var row_position_list = ($("#grid-table").jqGrid('getRowData', id)).position.split(';');
        var title = id+"-"+(row_position_list.length-1);
        $("#container div[title=" + title + "]")[0].click(); // 点击对应标记
      },
      loadComplete: function (data) {
        // 当未处理界面刷新时，修改todo_list_map_old，便于下一次与数据库进行比对
        if (data.status==0) {
          if (data.rows) {
            for (a = 0; a < data.rows.length; a++) {
              (function (n) {
                todo_list_map_old['\'' + data.rows[n].id + '\''] = data.rows[n].count;
              })(a);
            }
          }
        }
        //清除标记
        if (markersArray) {
          for (i in markersArray) {
            markersArray[i].setMap(null);
          }
        }
        // 重新添加地图markers
        if(data.rows) {
          markersInit(data.rows.slice(0, $(this).getGridParam("rowNum")));
        } else {
          markersInit();
        }
      }
    });
})

function callStatusEdit(key,status) {
  $.ajax({
    url:"admin",
    data:{_token: '{{csrf_token()}}', operator:'status_edit',id:key,status:status},
    type:'post',
    dataType:'json',
    success:function(data){
      if (data.status=="success"){
        $("#"+key).remove();
      } else {
        alert('操作失败');
      }
    }
  })
}
</script>

</body>

</html>
